<template>
  <div class="content members-ship">
    <dc-header :title="'成员管理'"
               :page-to="'/personal'"
               :action-title="'邀请成员'"
               :right-page-to="'/invite'"
               :right-icon="'icon-hearder-add'"></dc-header>
    <div class="content-body">
    <div class="head-top">
      <!--<mt-header class="limit-tip">-->
      <!--<mt-button slot="left">当前账号成员限制：2/3</mt-button>-->
      <!--<router-link to="/" slot="right">-->
      <!--去扩容-->
      <!--<mt-button class="iconfont icon-right">-->
      <!--</mt-button>-->
      <!--</router-link>-->
      <!--</mt-header>-->

      <dc-cell class="h100" title="角色管理" to="roleManage" isLink></dc-cell>

      <div class="mt20" v-for="ship in shipList">
        <div v-if="ship.roleName==='管理员'">
          <dc-cell class="h100" :title="ship.roleName" ></dc-cell>
          <dc-cell class="h120" v-for="item in ship.members"
                   :key="item.roleCode" :title="item.fullname" :tagName="'管理员'"
                   :img="item.photo?item.photo:'static/icon-user-role.png'"></dc-cell>
        </div>

        <div v-if="ship.roleName!='管理员'" >
          <dc-cell class="h100" :to="'/accessSet/' + ship.roleCode + '/' + ship.roleName" :title="ship.roleName" value="权限设置" sVal="true" isLink></dc-cell>
          <router-link :to="{path: '/memDetail', query: {id: item.id}}" v-for="item in ship.members" :key="item.id" tag="div">
            <dc-cell class="h120" :title="item.fullname"
                     :value="item.status==0?'未激活':''"
                     :img="item.photo?item.photo:'static/icon-user-role.png'" isLink>
            </dc-cell>
          </router-link>

      </div>
      </div>
    </div>
    </div>
  </div>
</template>
<script>
  import header from '@/common/plugins/header';
  import api from '../../common/api/member';
  import cell from '@/common/plugins/cell';
  import store from '../../vuex/store';
  export default {
    data () {
      return {
        shipList: [],
        storeCode: store.state.shopAlter.store.storeCode || store.state.shopAlter.store.groupCode
      };
    },
    components: {
      'dc-header': header,
      'dc-cell': cell
    },
    activated () {
      api.getRoleShip(this.storeCode)
        .then(res => {
          this.shipList = res;
          res.map((item, i) => {
            if (item.roleName === '管理员') {
              let str = res.splice(i, 1);
              res.unshift(str[0]);
            }
          });
        });
    },
    methods: {}
  };
</script>
<style lang="scss">
  @import "../../assets/css/variable";
  .h120{
    height: px2rem(120px);
  }
  .h100{
    height: px2rem(100px);
  }
  .members-ship {
    text-align: left;
    .mint-header {
      color: #333333;
    }
    .limit-tip {
      background-color: #ffde97;
      height: px2rem(80px);
      font-size: px2rem(28px);
    }
    .ml15 {
      margin-left: px2rem(15px);
    }
  }
</style>
